<template>
  <div class="w-nav-menu">
    <div
      v-for="menu in menuList"
      :key="menu.value"
      :class="['w-nav-menu-item', { 'is-active': modelValue === menu.value }]"
      @click="handleMenu(menu)"
    >
      {{ menu.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'wNavMenu',
  props: {
    value: {
      type: [Number, String],
    },
    menuList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  computed: {
    modelValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  methods: {
    handleMenu(menu) {
      const { value, path } = menu
      this.$emit('input', value)
      if (path) {
        this.$router.push(path)
      }
    },
  },
}
</script>

<style scoped>
.w-nav-menu {
  display: flex;
  padding-left: 55px;
  border-bottom: 1px solid #e6e6e6;
  .w-nav-menu-item {
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    color: #909399;
    cursor: pointer;
  }
  .w-nav-menu-item.is-active {
    border-bottom: 2px solid #409eff;
    color: #303133;
  }
}
</style>
